<template>
  <view class="wrap" :style="colorStyle">
    <view class="ChangePassword">
      <form @submit="editPwd">
        <view class="list">
          <view class="item acea-row row-middle">
            <text class="label_box">手机号</text>
            <input
              type="number"
              placeholder="请输入手机号"
              placeholder-class="placeholder"
              name="password"
              v-model="account"
            />
          </view>
          <view class="item acea-row">
            <text class="label_box">验证码</text>
            <input
              type="number"
              placeholder="填写验证码"
              placeholder-class="placeholder"
              class="codeIput"
              name="captcha"
              v-model="captcha"
            />
            <button
              class="code"
              :class="disabled === true ? 'on' : ''"
              :disabled="disabled"
              @click="code"
            >
              {{ text }}
            </button>
          </view>
          <view class="item acea-row row-middle">
            <text class="label_box">设置密码</text>
            <input
              type="password"
              placeholder="设置密码"
              placeholder-class="placeholder"
              name="password"
              v-model="password"
            />
          </view>
          <view class="item acea-row row-middle">
            <text class="label_box">确认密码</text>
            <input
              type="password"
              placeholder="确认密码"
              placeholder-class="placeholder"
              name="qr_password"
              v-model="qr_password"
            />
          </view>
        </view>
        <button form-type="submit" class="confirmBnt bg-color">确认修改</button>
      </form>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { codeModifyPassword, sendsms } from "@/api/user";
import { Tips } from "@/utils";
import { useSendCode } from "@/composables/useSendCode";
import { useTheme } from "@/composables/useTheme";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
import { hidePageNavInWechatBrowser } from "@/composables/useHiddenNavbar";
import hideWechatMenu from "@/composables/hideWechatMenu";
import { USER_INFO } from "@/config/cache";
onShow(() => {
  let userInfo = uni.getStorageSync(USER_INFO);
  if (userInfo) {
    let { phone } = JSON.parse(userInfo);
    account.value = phone;
  }
  hideWechatMenu();
});
onReady(() => {
  hidePageNavInWechatBrowser();
});
const { disabled, text, sendCode } = useSendCode();
const { colorStyle } = useTheme();
let account = ref("");
let password = ref("");
let captcha = ref("");
let qr_password = ref("");
// 获取验证码
async function code() {
  if (!account.value)
    return Tips({
      title: `请填写手机号码`,
    });
  if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(account.value))
    return Tips({
      title: `请输入正确的手机号码`,
    });
  if (!disabled.value) {
    uni.showLoading();
    let codeData = await getCodeHandler();
    if (codeData.code == 1) {
      uni.showToast({
        title: codeData.info,
      });
    } else {
      return;
    }
  }
  sendCode();
}
function getCodeHandler() {
  const params = {
    is_type: 2,
    phone: account.value,
  };
  console.log(params);

  return sendsms(params);
}
/**
 * 修改密码
 *
 */
function editPwd(e: any) {
  // account.value = e.detail.value.account;
  // password.value = e.detail.value.password;
  // qr_password.value = e.detail.value.qr_password;
  // captcha.value = e.detail.value.captcha;
  if (!account.value)
    return Tips({
      title: `请输入手机号`,
    });
  if (!captcha.value)
    return Tips({
      title: `请输入验证码`,
    });
  if (!password.value)
    return Tips({
      title: `请输入密码`,
    });
  if (qr_password.value != password.value)
    return Tips({
      title: `两次输入的密码不一致！`,
    });

  codeModifyPassword({
    phone: account.value,
    verify: captcha.value,
    password: password.value,
  })
    .then((res) => {
      return Tips(
        {
          title: res.info,
        },
        {
          tab: 5,
          url: "/pages/users/login",
        }
      );
    })
    .catch((err) => {
      return Tips({
        title: err.info,
      });
    });
}
</script>

<style scoped lang="scss">
.wrap {
  padding-top: 70rpx;
  background: #fff;
  .ChangePassword {
    padding: 0 70rpx;
  }
  .ChangePassword .phone {
    font-size: 30rpx;
    font-weight: bold;
    text-align: center;
    margin-top: 55rpx;
  }

  .ChangePassword .list {
    // width: 700rpx;
    margin: 53rpx auto 0 auto;
  }

  .ChangePassword .list .item {
    position: relative;
    padding: 30rpx 34rpx;
    // background: #fff;
    color: #383838;
    border-radius: 12rpx;
    margin-bottom: 14rpx;
    border-bottom: 2rpx solid rgba(232, 232, 232, 1);
    .label_box {
      display: inline-block;
      width: 130rpx;
    }

    .code {
      position: absolute;
      background-color: unset;
      color: rgba(13, 129, 211, 1);
      font-size: 30rpx;
      bottom: 50%;
      transform: translateY(50%);
      right: 30rpx;
      z-index: 999;
    }

    input {
      font-size: 30rpx;
      flex: 1;
    }
  }
  .ChangePassword .list .item .placeholder {
    color: #b9b9bc;
  }

  .ChangePassword .list .item .code {
    font-size: 30rpx;
    background-color: #fff;
  }

  .ChangePassword .list .item .code.on {
    color: #b9b9bc !important;
  }

  .ChangePassword .confirmBnt {
    font-size: 30rpx;
    width: 600rpx;
    height: 80rpx;
    background: var(--veiw-theme);
    border-radius: 20rpx;
    color: rgba(46, 46, 46, 1);
    margin: 92rpx auto 0 auto;
    text-align: center;
    line-height: 90rpx;
  }
}
</style>
